<template>
  <div class="index-box">
    <Header></Header>
    <Banner></Banner>

    <div class="nav">
      <ul>
        <li v-for="item in nav" :key="item.id">
          <img :src="item.imgas" alt="" />
          <span>{{item.name}}</span>
        </li>
       
      </ul>
    </div>

    <div class="main">
      <div class="top">
        <p class="title">优选岗位</p>
        <span></span>
      </div>
      <ul>
        <li v-for="(item,index) in zwxq" :key="item.id">
          <router-link :to="'/Zwxq/' + index">
            <p class="title">{{ item.name }}</p>
            <p class="neirong">
              {{ item.gsname }} <span class="biaoji">{{ item.gzsj }}</span>
              <span class="price">{{ item.money }}</span>
            </p>

            <div class="san">
              <span class="tiaojian">{{ item.gzsj }}</span>
              <span class="tiaojian">{{ item.gzsj }}</span>
              <span class="tiaojian">{{ item.gzsj }}</span>
            </div>
          </router-link>
        </li>
       
      </ul>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import Banner from "../LiuYang/Banner.vue";
import axios from 'axios';
export default {
  name: "index",
  data() {
    return {
      nav: [],
      zwxq:[],
    };
  },
  components: {
    Header,
    Footer,
    Banner,
  },
  created() {
    //   let xhr = new XMLHttpRequest();
    //   xhr.open("get","http://localhost:3000/index",true);
    //    xhr.send();
    //   xhr.onreadystatechange=()=>{
    //     if(xhr.readyState==4 && xhr.status==200){
    //       console.log("xhr.responseText",xhr.responseText);
    //       this.index=JSON.parse(xhr.responseText);
    //   }
    // }

    // console.log(this.axios);

     axios({
      url: "http://localhost:3000/zwxq",
      method: "get",
    }).then((res) => {
      // 直接转换成json对象，并赋值给index
      this.zwxq = res.data;
    });
    axios({
      method:'get',
      url: "  http://localhost:3000/nav ",
      
    }).then(res=>{
      this.nav=res.data;
    })
  },
};
</script>

<style scoped>
.nav {
  height: 1.2rem;
  margin-top: 0.1rem;
}

.nav ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.nav ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.15rem;
}

.nav li img {
  width: 0.5rem;
  height: 0.4rem;
  margin-bottom: 0.2rem;
}
.main {
  display: flex;
  flex-direction: column;
  margin-left: 0.1rem;
  margin-top: 0.1rem;
  padding-bottom: 0.7rem;
  position: relative;
}

.main .top {
  display: flex;
  margin-bottom: 0.6rem;
}

.main .top .title {
  position: absolute;
  font-size: 0.2rem;
  z-index: 1;
  font-size: 0.22rem;
  font-weight: 600;
}

.main .top span {
  display: block;
  width: 1rem;
  height: 0.3rem;
  position: absolute;
  top: 0.15rem;
  background: url(../assets/img/bg1.png) no-repeat;
  background-size: 0.9rem 60%;
}

.main ul {
  display: flex;
  flex-direction: column;
}

.main ul li {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #8e8e8e;
}

.main ul li .title {
  font-size: 0.2rem;
  line-height: 0.4rem;
}

.main ul li b {
  font-weight: 600;
}

.main ul li .biaoji {
  color: #bfbfbf;
  font-size: 0.12rem;
  line-height: 0.4rem;
}

.main ul li .san {
  color: #8db7d9;
  line-height: 0.5rem;
}

.main ul li .tiaojian:first-child {
  margin-left: 0;
}

.main ul li .tiaojian {
  margin-left: 0.3rem;
}

.main ul li .price {
  float: right;
  margin-right: 0.1rem;
}
</style>